<template>
  <div>
    <h1>App根组件</h1>
    <br>
    <TodoInput @add="onAdd"></TodoInput>
    <TodoList :list="todoList" class="mt-2"></TodoList>
    <TodoButton v-model:active="activeIdx"></TodoButton>
  </div>
</template>

<script>

import TodoList from "./components/TodoList.vue";
import TodoInput from "./components/TodoInput.vue";
import TodoButton from "./components/TodoButton.vue";

export default {
  name: 'App',
  data() {
    return {
      todoList: [
        {id: 1, task: "周一早晨9点开会", done: true},
        {id: 2, task: "周一晚上9点吃饭", done: false},
        {id: 3, task: "周一晚上12点开放", done: false},
      ],
      nextId: 4,
      activeIdx: 1,
    }
  },
  components: {
    TodoButton,
    TodoInput,
    TodoList
  },
  methods: {
    onAdd(taskName) {
      this.todoList.push({
        id: this.nextId++,
        task: taskName,
        done: false
      })
    }
  },
  computed: {
    todoList() {
      switch (this.activeIdx) {
        case 0:
          return this.todoList;
        case 1:
          return this.todoList.filter(x => x.done);
        case 2:
          return this.todoList.filter(x => !x.done);
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>